<template>
  <div class="virtual-lab-container">
    <h2 class="lab-title">双缝干涉实验</h2>

    <div class="scene-wrapper">
      <div class="laser-source">
        <div class="laser-body"></div>
        <div class="laser-tip"></div>
        <div v-if="isLaserOn" class="laser-beam"></div>
      </div>

      <div class="slits-barrier">
        <div class="slit"></div>
        <div class="slit"></div>
      </div>

      <div class="screen-area">
        <div v-if="showWaves" class="wave-container">
          <div class="wave wave1"></div>
          <div class="wave wave2"></div>
        </div>
        <div class="interference-screen">
          <div v-if="showPattern" class="interference-pattern"></div>
        </div>
      </div>
    </div>

    <div class="info-panel">
      <p><strong>实验现象:</strong> {{ phenomenonText }}</p>
      <p>光作为一种波，通过双缝后会发生干涉，在屏幕上形成明暗相间的条纹。</p>
      <button @click="toggleExperiment" :disabled="experimentState === 'running'">
        {{ experimentState === 'idle' ? '开始实验' : '重置实验' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// --- 状态管理 ---
const experimentState = ref('idle'); // 'idle', 'running', 'finished'
const phenomenonText = ref('点击“开始实验”按钮，观察光的双缝干涉现象。');

// --- 现象控制 ---
const isLaserOn = ref(false);
const showWaves = ref(false);
const showPattern = ref(false);

// --- 辅助函数 ---
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// --- 主要实验逻辑 ---
async function startExperiment() {
  if (experimentState.value !== 'idle') return;
  experimentState.value = 'running';

  phenomenonText.value = '开启激光源，发射单色光...';
  isLaserOn.value = true;
  await delay(1500);

  phenomenonText.value = '光波到达双缝屏障，并发生衍射...';
  showWaves.value = true;
  await delay(3000);

  phenomenonText.value = '两束衍射波在空间中相遇，发生干涉...';
  await delay(2000);

  phenomenonText.value = '屏幕上形成了明暗相间的干涉条纹。';
  showPattern.value = true;

  experimentState.value = 'finished';
}

// --- 重置实验 ---
function resetExperiment() {
  experimentState.value = 'idle';
  phenomenonText.value = '点击“开始实验”按钮，观察光的双缝干涉现象。';
  isLaserOn.value = false;
  showWaves.value = false;
  showPattern.value = false;
}

// --- 控制器 ---
function toggleExperiment() {
  if (experimentState.value === 'idle') {
    startExperiment();
  } else {
    resetExperiment();
  }
}
</script>

<style scoped>
/* 容器和通用布局 */
.virtual-lab-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f0f4f8; /* 浅色背景 */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.lab-title {
  text-align: center;
  color: #334e68;
  margin-top: 0;
  margin-bottom: 30px;
}
.scene-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-grow: 1;
  padding: 0 50px;
}

/* 实验组件 */
.laser-source {
  position: relative;
  width: 80px;
  height: 40px;
}
.laser-body {
  width: 100%;
  height: 100%;
  background: #627d98;
  border-radius: 5px;
  border: 2px solid #486581;
}
.laser-tip {
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #334e68;
  border-radius: 2px;
}

/* --- 修正部分 --- */
.laser-beam {
  position: absolute;
  left: 85px; /* 从激光器左侧开始定位，保证动画向右延伸 */
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 2px;
  background-color: #ff4d4d;
  box-shadow: 0 0 8px #ff4d4d, 0 0 12px #ff4d4d;
  animation: beam-fade-in 1.5s ease-out forwards;
}

.slits-barrier {
  width: 15px;
  height: 220px;
  background-color: #334e68;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.slit {
  width: 100%;
  height: 30px;
  background-color: #f0f4f8; /* 与背景色相同，形成缝隙效果 */
}

.screen-area {
  position: relative;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.wave-container {
  position: absolute;
  top: 50%;
  left: -50px; /* 从双缝处开始 */
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
}
.wave {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 77, 77, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 3s ease-out forwards;
}
.wave.wave1 {
  top: calc(50% - 35px); /* 对应第一个缝隙 */
}
.wave.wave2 {
  top: calc(50% + 35px); /* 对应第二个缝隙 */
  animation-delay: 0.1s; /* 略微延迟以增加视觉效果 */
}

.interference-screen {
  width: 15px;
  height: 280px;
  background-color: #d1d9e6;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 1px 1px 5px rgba(0,0,0,0.2);
}

.interference-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: repeating-linear-gradient(
    to bottom,
    #ffadad 0px,
    #ffadad 5px, /* 明条纹 */
    #ff4d4d 5px,
    #ff4d4d 15px, /* 亮核心 */
    #ffadad 15px,
    #ffadad 20px,
    rgba(0,0,0,0.4) 20px,
    rgba(0,0,0,0.4) 28px /* 暗条纹 */
  );
  animation: pattern-fade-in 2s 1s ease-in forwards; /* 延迟1s出现 */
}


/* 信息面板 */
.info-panel {
  margin-top: 30px;
  padding: 15px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #d1d9e6;
}
.info-panel p {
  margin: 8px 0;
  color: #486581;
}
.info-panel button {
  margin-top: 10px;
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  background-color: #27ae60;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 16px;
}
.info-panel button:disabled {
  background-color: #a0a0a0;
  cursor: not-allowed;
}
.info-panel button:hover:not(:disabled) {
  background-color: #229954;
}

/* 动画效果 */
@keyframes beam-fade-in {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 120px;
    opacity: 1;
  }
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(15);
    opacity: 0;
  }
}

@keyframes pattern-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>